<template>
    <!-- home页面 -->
    <div class="home">
        <z-pagination 
        :pageConfig="{
            isShowPage: true,
            currentPage: currentPage,
            pageSize: pageSize,
            total: 1000000,
            pages: [10, 30, 50],
            pageType: 'basic',
        }" @getPageNum="getPageNum"></z-pagination>

        <z-pie
            :data="pieData"
            style="width: 200px; height: 200px"
            :option="pieOption"
            :config="{
                type: 'ring',
                color: 'pieColor',
                title: '总个数\n300',
                legentConfig: 'right',
                showLabel: false,
                showLegend: true,
                showNullLabel: true,
            }"
        ></z-pie>
        <z-stack-bar
            id="stackBar"
            :data="stackData"
            ref="barRef2"
            :config="{
                legentConfig: 'right',
            }"
            style="width: 500px; height: 400px"
        ></z-stack-bar>
        <button @click="modifyWidth">修改元素宽度</button>

        <z-bar
            id="barSty"
            ref="barRef"
            style="width: 500px; height: 400px; background: #eee"
            :option="option"
            :config="configBar"
            :data="barData"
        ></z-bar>

        <!-- <z-line
            style="width: 600px;height: 400px;"
            :data="lineData"
            :config="{
                markLine: [{ name: '目标值', value: 30, color: 'red' }],
                showLabel:true,
                color:['#aaa','#afa'],
                showFillArea:true
            }"
        ></z-line>

        <z-chart style="width: 600px;height: 400px;" :option="option2"></z-chart>-->

        <z-heatmap
            :data="heatmap"
            style="width: 500px; height: 600px"
            :config="{
                min: 0,
                max: 300,
                color: ['#f00', '#fff'],
                unit: 'mg/m³',
            }"
        ></z-heatmap>

        <z-radar :data="raderData" style="width: 400px; height: 400px"></z-radar>

        <z-sankey :data="sankey" style="width: 600px; height: 800px"></z-sankey>

        <z-water-polo
            style="width: 300px; height: 300px"
            :data="{ value: 0.56 }"
            ref="waterPoloRef"
            :config="{
                color: '#68cffe',
            }"
            :option="waterOption"
        ></z-water-polo>
    </div>
</template>

<script>
    const echarts = require('echarts')
    export default {
        name: 'home',
        data() {
            return {
                currentPage: 1,
                pageSize: 30,
                waterOption: {},
                barData: {
                    xAxis: ['1月', '2月', '3月', '4月', '5月', '9月'],
                    series: [
                        {
                            name: '2018年',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [22, 33, 28, 36, 28, 35],
                        },
                        {
                            name: '2019年',
                            type: 'bar',
                            yAxisIndex: 0,
                            data: [28, 36, 28, 35, 22, 33],
                        },
                    ],
                },
                sankey: [
                    {
                        name: '广州',
                        items: [
                            { name: '氨氮', value: '15' },
                            { name: 'COD', value: '25' },
                            { name: 'BOD', value: '5' },
                        ],
                    },
                    {
                        name: '深圳',
                        items: [
                            { name: '氨氮', value: '15' },
                            { name: 'COD', value: '25' },
                            { name: 'BOD', value: '5' },
                        ],
                    },
                    {
                        name: '东莞',
                        items: [
                            { name: '氨氮', value: '15' },
                            { name: 'COD', value: '25' },
                            { name: 'BOD', value: '5' },
                        ],
                    },
                    {
                        name: '佛山',
                        items: [
                            { name: '氨氮', value: '15' },
                            { name: 'COD', value: '25' },
                            { name: 'BOD', value: '5' },
                        ],
                    },
                    {
                        name: '中山',
                        items: [
                            { name: '氨氮', value: '15' },
                            { name: 'COD', value: '25' },
                            { name: 'BOD', value: '5' },
                        ],
                    },
                    {
                        name: '清远',
                        items: [
                            { name: '氨氮', value: '5' },
                            { name: 'COD', value: '25' },
                            { name: 'BOD', value: '5' },
                        ],
                    },
                ],
                raderData: {
                    indicator: ['东', '东南', '南', '西南', '西', '西北', '北', '东北'],
                    series: [
                        { name: '类A', value: [28, 20, 36, 25, 12, 8, 19, 15] },
                        { name: '类B', value: [21, 22, 33, 22, 10, 5, 12, 11] },
                    ],
                },
                heatmap: {
                    xAxis: ['2018年', '2019年', '2020年', '2021年', '2022年'],
                    series: [
                        { name: '广州市', data: [100, 120, 140, 200, 300] },
                        { name: '广州市', data: [100, 130, 140, 200, 300] },
                        { name: '广州市', data: [400, 120, 140, 200, 300] },
                        { name: '广州市', data: [100, 120, 140, 200, 300] },
                        { name: '广州市', data: [200, 120, 140, 200, 300] },
                        { name: '广州市', data: [100, 120, 140, 200, 300] },
                        { name: '广州市', data: [100, 120, 140, 200, 300] },
                        { name: '广州市', data: [100, 120, 140, 200, 300] },
                        { name: '广州市', data: [100, 125, 140, 200, 300] },
                        { name: '广州市', data: [100, 120, 140, 200, 300] },
                        { name: '广州市', data: [100, 120, 120, 200, 300] },
                    ],
                },
                pieData: [
                    { name: 'Ⅰ类ssssssssssssssssssss', value: 5 },
                    { name: 'Ⅱ类xxxxxxxxxxxx', value: 5 },
                    { name: 'Ⅲ类wwwwwwwwww', value: 30 },
                    { name: 'Ⅳ类aaaaaaaaaaaaaaaaaaaaaa', value: 20 },
                    { name: 'Ⅴ类cccccccccc', value: 10 },
                    { name: '劣Ⅴ类s111111111111', value: 2 },
                    { name: '劣Ⅴ类s22222222222', value: 2 },
                    { name: '劣Ⅴ类s333333', value: 2 },
                    { name: '劣Ⅴ类s4444444', value: 2 },
                    { name: '劣Ⅴ类s666666666', value: 2 },
                    { name: '劣Ⅴ类s55555555555', value: 2 },
                    { name: '劣Ⅴ类s77777777', value: 2 },
                    { name: '劣Ⅴ类s88888888', value: 2 },
                ],
                pieOption: {
                    title: {
                        left: '15%',
                    },
                    legend: {
                        formatter: function (name) {
                            return name.substr(0, 3) + '…'
                        },
                        tooltip: {
                            show: true,
                        },
                    },
                    series: [
                        {
                            center: ['28%', '50%'],
                            radius: ['35%', '55%'],
                        },
                    ],
                },
                option: {
                    xAxis: {
                        axisLabel: {
                            color: 'red',
                            fontSize: 20,
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed',
                            },
                        },
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '水量',
                        },
                        {
                            type: 'value',
                            name: '年龄',
                        },
                    ],
                    tooltip: {},
                },
                lineData: {
                    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    series: [
                        {
                            name: '2018年',
                            data: [22, 33, 28, 36, 28, 35],
                        },
                        {
                            name: '2019年',
                            data: [28, 36, 28, 35, 22, 33],
                        },
                    ],
                },
                option2: {
                    title: {
                        text: 'Basic Graph',
                    },
                    tooltip: {},
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series: [
                        {
                            type: 'graph',
                            layout: 'none',
                            symbolSize: 50,
                            roam: true,
                            label: {
                                show: true,
                            },
                            edgeSymbol: ['circle', 'arrow'],
                            edgeSymbolSize: [4, 10],
                            edgeLabel: {
                                fontSize: 20,
                            },
                            data: [
                                {
                                    name: 'Node 1',
                                    x: 300,
                                    y: 300,
                                },
                                {
                                    name: 'Node 2',
                                    x: 800,
                                    y: 300,
                                },
                                {
                                    name: 'Node 3',
                                    x: 550,
                                    y: 100,
                                },
                                {
                                    name: 'Node 4',
                                    x: 550,
                                    y: 500,
                                },
                            ],
                            // links: [],
                            links: [
                                {
                                    source: 0,
                                    target: 1,
                                    symbolSize: [5, 20],
                                    label: {
                                        show: true,
                                    },
                                    lineStyle: {
                                        width: 5,
                                        curveness: 0.2,
                                    },
                                },
                                {
                                    source: 'Node 2',
                                    target: 'Node 1',
                                    label: {
                                        show: true,
                                    },
                                    lineStyle: {
                                        curveness: 0.2,
                                    },
                                },
                                {
                                    source: 'Node 1',
                                    target: 'Node 3',
                                },
                                {
                                    source: 'Node 2',
                                    target: 'Node 3',
                                },
                                {
                                    source: 'Node 2',
                                    target: 'Node 4',
                                },
                                {
                                    source: 'Node 1',
                                    target: 'Node 4',
                                },
                            ],
                            lineStyle: {
                                opacity: 0.9,
                                width: 2,
                                curveness: 0,
                            },
                        },
                    ],
                },
                stackData: {},
                configBar: {},
            }
        },
        created() {
            //全局配置
            // this.$zChart.setChartConfig({
            //     FONT_COLOR: '#faf',
            //     //BORDER_COLOR: '#afa',
            //     FONT_S: 18,
            //     SHOW_TOOLBOX: true,
            // })
            setTimeout(() => {
                this.$refs.barRef.resizeChart()
                this.$refs.barRef2.resizeChart()
                //this.$refs.barRef.chart.resize()
            }, 100)
            this.dashWater()
        },
        methods: {
            getPageNum (currentPage, pageSize){
                console.log(pageSize, currentPage)
            },
            checkDetail() {
                console.log('/////////')
            },
            modifyWidth() {
                let dom = document.getElementById('barSty')
                dom.setAttribute('style', 'width:800px;height: 400px; background: #eee')
                console.log(this.$refs.barRef, '---')
                let dom2 = document.getElementById('stackBar')
                dom2.setAttribute('style', 'width:800px;height: 400px; background: #eee')
                setTimeout(() => {
                    this.$refs.barRef.resizeChart()
                    this.$refs.barRef2.resizeChart()
                    //this.$refs.barRef.chart.resize()
                }, 100)

                // this.configBar = {
                //     unit: 'ml',
                //     showLabel: true,
                //     legentConfig: 'right',
                // }
            },
            dashWater() {
                var value = 0.65
                var data = [value, value, value]
                function Pie() {
                    let dataArr = []
                    for (var i = 0; i < 150; i++) {
                        if (i % 2 === 0) {
                            dataArr.push({
                                name: (i + 1).toString(),
                                value: 25,
                                itemStyle: {
                                    normal: {
                                        color: '#fff',
                                        borderWidth: 0,
                                        borderColor: 'rgba(0,0,0,0)',
                                    },
                                },
                            })
                        } else {
                            dataArr.push({
                                name: (i + 1).toString(),
                                value: 10,
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(0,0,0,0)',
                                        borderWidth: 0,
                                        borderColor: 'rgba(0,0,0,0)',
                                    },
                                },
                            })
                        }
                    }
                    return dataArr
                }
                this.waterOption = {
                    backgroundColor: '#462f9b',
                    title: [
                        {
                            text: 'MARGINAL COST✍',
                            x: '50%',
                            y: 30,
                            textAlign: 'center',
                            textStyle: {
                                fontSize: '30',
                                fontWeight: '100',
                                color: '#fff',
                                textAlign: 'center',
                            },
                        },
                        {
                            text: (value * 100).toFixed(0) + '%',
                            left: '50%',
                            top: '30%',
                            textAlign: 'center',
                            textStyle: {
                                fontSize: '40',
                                fontWeight: '400',
                                color: '#fff',
                                textAlign: 'center',
                                textBorderColor: 'rgba(0, 0, 0, 0)',
                                textShadowColor: '#000',
                                textShadowBlur: '0',
                                textShadowOffsetX: 0,
                                textShadowOffsetY: 1,
                            },
                        },
                    ],
                    series: [
                        {
                            type: 'liquidFill',
                            radius: '70%',
                            z: 6,
                            center: ['50%', '50%'],
                            amplitude: 20,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(250, 111, 202, 1)',
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(252, 140, 199, .5)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(255, 197, 196, 1)',
                                    },
                                ],
                                globalCoord: false,
                            },
                            data: [0.6, { value: 0.5, direction: 'left' }, 0.4, 0.3],
                            backgroundStyle: {
                                borderWidth: 1,
                                color: 'transparent',
                            },
                            label: {
                                normal: {
                                    formatter: '',
                                },
                            },
                            outline: {
                                show: true,
                                itemStyle: {
                                    borderWidth: 0,
                                },
                                borderDistance: 0,
                            },
                        },
                        {
                            name: '4',
                            type: 'pie',
                            z: 1,
                            radius: '70.5%',
                            center: ['50%', '50%'],
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false,
                                    },
                                },
                            },
                            data: [
                                {
                                    value: 100,
                                    itemStyle: {
                                        normal: {
                                            color: '#ac9ed1',
                                        },
                                    },
                                },
                            ],
                        },
                        {
                            name: '5',
                            type: 'pie',
                            z: 1,
                            radius: '70%',
                            center: ['50%', '50%'],
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false,
                                    },
                                },
                            },
                            data: [
                                {
                                    value: 100,
                                    itemStyle: {
                                        normal: {
                                            color: '#462f9b',
                                        },
                                    },
                                },
                            ],
                        },
                        {
                            type: 'pie',
                            zlevel: 0,
                            silent: true,
                            radius: ['60%', '61%'],
                            z: 10,
                            itemStyle: {
                                normal: {
                                    areaColor: 'rgba(137, 137, 137, .3)',
                                    borderColor: '#888',
                                },
                                emphasis: {
                                    label: {
                                        show: false,
                                    },
                                    areaColor: 'rgba(255, 255, 255, .1)',
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: Pie(),
                        },
                    ],
                }
            },
        },
    }
</script>
